import G6 from '@antv/g6';


export const nameTooltip = new G6.Tooltip({
    offestX: 10,
    offestY: 10,
    itemTypes: ['node', 'combo'],
    getContent: (e) => {
        const targetName = e.target.get('name');
        const node = e.item.getModel();
        if (targetName === 'node-name') {
            return node.nameBak && node.nameBak !== node.workloadName ?
                `${node.nameBak}(${node.workloadName})`
                : node.workloadName;
        }
        if (targetName === 'namespace-name') {
            return node.namespace;
        }
        if (targetName === 'text-shape') {
            return node.labelText;
        }
        if (targetName === 'cluster-name') {
            return node.masterName;
        }
        return '';
    },
    shouldBegin: (e) => {
        const targetName = e.target.get('name');
        if (targetName === 'node-name'
            || targetName === 'namespace-name'
            || targetName === 'text-shape'
            || targetName === 'cluster-name') {
            return true;
        }
        return false;
    }
});


export const genEditContextMenu = (handlers, domId) => {
  const contextMenu = new G6.Menu({
    getContent(evt) {
        const node = evt.item.getModel();
        return `<ul class='context_menu_list'>
            ${domId === 'editTopo' ? `<li data-code='rename'>重命名</li>` : ''}
            ${domId === 'editTopo' ?
                (node.isEntrance ? `<li data-code='removeEntrance'>取消设置入口节点</li>` : `<li data-code='addEntrance'>设置入口节点</li>`)
                : ''}
            ${node.inSystem ? `<li data-code='removeSystem'>移除系统</li>` : `<li data-code='addSystem'>加入系统</li>`}
            ${domId === 'editTopo' ? `<li data-code='showAdjacentNodes'>展示上下游</li>` : ''}
        </ul>`;
    },
    handleMenuClick: (target, item) => {
        const code = target.getAttribute('data-code');
        const node = item.getModel();

        const handler = handlers[code]
        if(handler) {
          handler(node)
        }
        // if (code === 'rename') {
        //     this.nowRenameNodeId = node.id;
        //     this.setState({ renameModalVisible: true });
        // }
        // if (code === 'removeEntrance') {
        //     this.updateIsEntranceNode(node, 0);
        // }
        // if (code === 'addEntrance') {
        //     this.updateIsEntranceNode(node, 1);
        // }
        // if (code === 'removeSystem') {
        //     this.updateInSystemNode(node, false);
        // }
        // if (code === 'addSystem') {
        //     this.updateInSystemNode(node, true);
        // }
        // if (code === 'showAdjacentNodes') {
        //     showAdjacentNodes && showAdjacentNodes(node);
        // }
    },
    shouldBegin: (evt) => {
        const targetName = evt.target.get('name');
        if (targetName?.indexOf('node-more') > -1) {
            return true;
        }
        return false;
    },
    offsetX: 0,
    offsetY: 10,
    itemTypes: ['node'],
    trigger: 'click',
  });
  return contextMenu
}
